import React, { useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { AfterSales } from '@/service/restaurant';

interface LineChartProps {
  sales: AfterSales;
}

const LineChart: React.FC<LineChartProps> = ({ sales }) => {
  const [option, setOption] = useState({
    title: {
      text: '预测数据',
    },
    tooltip: {},
    xAxis: {
      data: [],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: [],
      },
    ],
  });

  useEffect(() => {
    let dates = sales.map((item) => item.date);
    let futureSales = sales.map((item) => item.futureSales);

    setOption((prevOption: any) => ({
      ...prevOption,
      xAxis: {
        ...prevOption.xAxis,
        data: dates,
      },
      series: [
        {
          ...prevOption.series[0],
          data: futureSales,
        },
      ],
    }));
  }, [sales]);

  return (
    <ReactEcharts option={option} style={{ height: '400px', width: '350px' }} />
  );
};

export default LineChart;
